/* 分页器样式强制覆盖 - 解决白色背景问题 */

/* 分页器容器对齐 */
.el-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* 最高优先级的分页器样式覆盖 */
.el-pagination,
.el-pagination *,
.el-pagination .el-pager,
.el-pagination .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination__total,
.el-pagination__sizes,
.el-pagination__jump,
.el-pagination__jump .el-input,
.el-pagination__jump .el-input__wrapper,
.el-pagination__sizes .el-select,
.el-pagination__sizes .el-select .el-input,
.el-pagination__sizes .el-select .el-input__wrapper,
.el-pagination__sizes .el-select .el-input__inner,
.el-pagination__jump .el-input__inner {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器容器强制透明 */
.pagination,
.pagination-container,
.el-pagination-container,
div[class*="pagination"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器按钮样式重定义 */
.el-pagination .el-pager li {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  transition: all 0.3s ease !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.el-pagination .el-pager li:hover {
  background: rgba(120, 220, 255, 0.2) !important;
  background-color: rgba(120, 220, 255, 0.2) !important;
  border-color: rgba(120, 220, 255, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(120, 220, 255, 0.2);
}

.el-pagination .el-pager li.is-active {
  background: rgba(120, 220, 255, 0.3) !important;
  background-color: rgba(120, 220, 255, 0.3) !important;
  border-color: rgba(120, 220, 255, 0.6) !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(120, 220, 255, 0.3);
}

/* 前一页/后一页按钮 */
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
  background: rgba(120, 220, 255, 0.2) !important;
  background-color: rgba(120, 220, 255, 0.2) !important;
  border-color: rgba(120, 220, 255, 0.5) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(120, 220, 255, 0.2);
}

/* 禁用状态 */
.el-pagination .btn-prev:disabled,
.el-pagination .btn-next:disabled {
  background: rgba(120, 220, 255, 0.05) !important;
  background-color: rgba(120, 220, 255, 0.05) !important;
  border-color: rgba(120, 220, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 分页器文本元素 */
.el-pagination__total,
.el-pagination__classifier {
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
}

/* 每页显示条数选择器 */
.el-pagination__sizes .el-select .el-input__wrapper {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.el-pagination__sizes .el-select .el-input__wrapper:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  background-color: rgba(120, 220, 255, 0.15) !important;
  border-color: rgba(120, 220, 255, 0.4) !important;
}

.el-pagination__sizes .el-select .el-input__inner {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  height: 30px !important;
  line-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
}

/* 分页器各个组件的统一对齐 */
.el-pagination__sizes,
.el-pagination__jump {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
}

.el-pagination .el-pager {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
}

/* 页面大小选择器的精确对齐 */
.el-pagination__sizes .el-select {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

.el-pagination__sizes .el-select .el-input {
  height: 32px !important;
  line-height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* 确保选择器内部元素也对齐 */
.el-pagination__sizes .el-select .el-input__suffix {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* 分页器整体对齐 */
.el-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* 确保所有分页器子元素都在同一基线上 */
.el-pagination > * {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  vertical-align: middle !important;
}

/* 页码按钮对齐 */
.el-pagination .el-pager li {
  height: 32px !important;
  line-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 跳转输入框对齐 */
.el-pagination__jump .el-input {
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.el-pagination__jump .el-input__wrapper {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

/* 下拉列表选项样式 */
.el-select-dropdown .el-select-dropdown__item {
  background: rgba(60, 80, 100, 0.9) !important;
  color: #ffffff !important;
  height: 32px !important;
  line-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-bottom: 1px solid rgba(120, 220, 255, 0.1) !important;
}

.el-select-dropdown .el-select-dropdown__item:hover {
  background: rgba(120, 220, 255, 0.2) !important;
  color: #ffffff !important;
}

.el-select-dropdown .el-select-dropdown__item.is-selected {
  background: rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* 下拉列表容器 */
.el-select-dropdown {
  background: rgba(60, 80, 100, 0.95) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 跳转输入框 */
.el-pagination__jump .el-input__wrapper {
  background: rgba(120, 220, 255, 0.1) !important;
  background-color: rgba(120, 220, 255, 0.1) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  width: 50px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
}

.el-pagination__jump .el-input__wrapper:hover {
  background: rgba(120, 220, 255, 0.15) !important;
  background-color: rgba(120, 220, 255, 0.15) !important;
  border-color: rgba(120, 220, 255, 0.4) !important;
}

.el-pagination__jump .el-input__inner {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  text-align: center;
}

.el-pagination__jump .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 跳转文本 */
.el-pagination__jump {
  color: #ffffff !important;
  font-weight: 500;
}

/* 强制覆盖任何可能的白色背景 */
.el-pagination [style*="background-color: white"],
.el-pagination [style*="background-color: #fff"],
.el-pagination [style*="background-color: #ffffff"],
.el-pagination [style*="background: white"],
.el-pagination [style*="background: #fff"],
.el-pagination [style*="background: #ffffff"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器下拉菜单样式 */
.el-select-dropdown {
  background: rgba(30, 35, 45, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(120, 220, 255, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.el-select-dropdown .el-select-dropdown__item {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

.el-select-dropdown .el-select-dropdown__item:hover {
  background: rgba(120, 220, 255, 0.2) !important;
  background-color: rgba(120, 220, 255, 0.2) !important;
  color: #ffffff !important;
}

.el-select-dropdown .el-select-dropdown__item.is-selected {
  background: rgba(120, 220, 255, 0.3) !important;
  background-color: rgba(120, 220, 255, 0.3) !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* 确保分页器在所有容器中都是透明的 */
.management-card .pagination,
.role-management .pagination,
.user-management .pagination,
.permission-management .pagination,
.cmdb-management .pagination,
.monitor-container .pagination {
  background: transparent !important;
  background-color: transparent !important;
}

/* 分页器动画效果 */
.el-pagination .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next {
  position: relative;
  overflow: hidden;
}

.el-pagination .el-pager li::before,
.el-pagination .btn-prev::before,
.el-pagination .btn-next::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.el-pagination .el-pager li:hover::before,
.el-pagination .btn-prev:hover::before,
.el-pagination .btn-next:hover::before {
  left: 100%;
}

/* 分页器元素对齐 - 不强制高度 */
.el-pagination > * {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 页码按钮 - 保持原有样式但不强制高度 */
.el-pagination .el-pager li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 2px !important;
}

/* 前进后退按钮 */
.el-pagination .btn-prev,
.el-pagination .btn-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 简单的元素对齐 */
.el-pagination .el-pagination__total,
.el-pagination .el-pagination__sizes,
.el-pagination .el-pagination__jump {
  display: flex !important;
  align-items: center !important;
}

/* 修复页面大小选择器宽度和文字显示 */
.el-pagination .el-pagination__sizes .el-select {
  width: auto !important;
  min-width: 100px !important;
}

.el-pagination .el-pagination__sizes .el-select .el-select__wrapper {
  width: auto !important;
  min-width: 100px !important;
  padding: 4px 12px !important;
}

.el-pagination .el-pagination__sizes .el-select .el-select__selected-item {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: nowrap !important;
}

.el-pagination .el-pagination__sizes .el-select .el-select__input {
  width: auto !important;
  min-width: 80px !important;
}

/* 修复下拉菜单顶部空白 */
.el-select-dropdown {
  padding-top: 0 !important;
}

.el-select-dropdown .el-scrollbar {
  padding-top: 0 !important;
}

.el-select-dropdown .el-select-dropdown__list {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.el-select-dropdown .el-option:first-child {
  margin-top: 0 !important;
}
